<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 简历分析</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/candidate/resume.css" rel="stylesheet">
    <style>
        .upload-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            cursor: pointer;
        }
        .upload-area.highlight {
            border-color: #66afe9;
        }
        .model-selection {
            margin-top: 20px;
            display: flex;
            align-items: center;
        }
        .model-selection label {
            margin-right: 10px;
        }
        .model-selection .model-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
        .model-selection button {
            margin-right: 5px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .model-selection button.selected {
            background-color: #66afe9;
            color: white;
        }
        .file-info {
            margin-top: 10px;
            color: #66afe9;
        }
        .resume-section {
            margin-top: 20px;
        }
        .resume-section h2 {
            border-bottom: 2px solid #000;
            padding-bottom: 5px;
        }
        .resume-section ul {
            list-style-type: none;
            padding: 0;
        }
        .resume-section li {
            margin: 5px 0;
        }
        .skill-item {
            margin-bottom: 10px;
        }
        .skill-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .skill-bar {
            width: 100%;
            background-color: #eee;
            border-radius: 5px;
            overflow: hidden;
        }
        .skill-progress {
            height: 20px;
            background-color: #66afe9;
        }
        .echarts-container {
            margin-top: 20px;
        }
        .download-report-btn {
            margin-top: 20px;
        }
    </style>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/applicant/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="/applicant/interview">
                        <i class='bx bx-video'></i>
                        <span>面试中心</span>
                    </a>
                </li>
                <li>
                    <a href="/applicant/dashboard" data-bs-toggle="collapse" data-bs-target="#resumeMenu" aria-expanded="true" aria-controls="resumeMenu">
                        <i class='bx bx-file'></i>
                        <span>简历中心</span>
                        <i class='bx bx-chevron-down'></i> <!-- 添加展开图标 -->
                    </a>
                    <ul class="collapse show" id="resumeMenu">
                        <li>
                            <a href="/applicant/resume">
                                <i class='bx bx-file'></i>
                                <span>简历上传</span>
                            </a>
                        </li>
                        <li class="active">
                            <a href="/applicant/analyze_resume">
                                <i class='bx bx-file'></i>
                                <span>简历分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/upload_resume">
                                <i class='bx bx-file'></i>
                                <span>投递简历</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/resume_manage">
                                <i class='bx bx-file'></i>
                                <span>简历管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="/applicant/personal_center">
                        <i class='bx bx-user'></i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 在sidebar后面添加 -->
        <div class="sidebar-overlay"></div>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="resume-container">
                <!-- 简历选择 -->
                <div class="resume-selection">
                    <h2>选择简历</h2>
                    <select id="resumeSelect" class="form-select">
                        <!-- 简历选项将动态加载 -->
                    </select>
                </div>

                <!-- 岗位选择 -->
                <div class="job-selection">
                    <h2>选择岗位</h2>
                    <select id="jobSelect" class="form-select">
                        <!-- 岗位选项将动态加载 -->
                    </select>
                </div>

                <!-- 模型选择 -->
                <div class="model-selection">
                    <label>请选择分析模型:</label>
                    <div class="model-item">
                        <button class="btn btn-secondary" onclick="selectModel('deepseek-r1')">DeepSeek-R1</button>
                        <span>DeepSeek-R1</span>
                    </div>
                    <div class="model-item">
                        <button class="btn btn-secondary" onclick="selectModel('qwen-plus')">通义千问</button>
                        <span>通义千问</span>
                    </div>
                </div>

                <!-- 分析按钮 -->
                <button class="btn btn-primary" onclick="analyzeResume()">点击分析简历</button>
            </div>
        </main>
    </div>

    <!-- 弹窗结构 -->
    <div id="loadingModal" class="modal" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">请耐心等待</h5>
                </div>
                <div class="modal-body">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p id="loadingMessage">分析可能需要大约1分钟左右，请耐心等待。</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let selectedModel = null;

        function selectModel(modelName) {
            // 移除所有选中状态
            const buttons = document.querySelectorAll('.model-selection button');
            buttons.forEach(button => button.classList.remove('selected'));

            // 设置当前按钮为选中状态
            const selectedButton = document.querySelector(`.model-selection button[onclick="selectModel('${modelName}')"]`);
            selectedButton.classList.add('selected');

            selectedModel = modelName;
            console.log('Selected model:', selectedModel);  // 调试信息
        }

        function loadResumes() {
            fetch('/api/get_resumes', {
                method: 'GET'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const resumeSelect = document.getElementById('resumeSelect');
                    data.resumes.forEach(resume => {
                        const option = document.createElement('option');
                        option.value = resume.id;
                        option.textContent = resume.filename;
                        resumeSelect.appendChild(option);
                    });
                } else {
                    alert('加载简历失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('加载简历时出错:', error);
                alert('加载简历失败');
            });
        }

        function loadJobs() {
            fetch('/api/get_all_jobs', {  // 使用新的 API 端点
                method: 'GET'
            })
            .then(response => {
                if (response.status === 200) {
                    return response.json();
                } else {
                    throw new Error('加载岗位失败');
                }
            })
            .then(data => {
                const jobSelect = document.getElementById('jobSelect');
                data.jobs.forEach(job => {
                    const option = document.createElement('option');
                    option.value = job.id;  // 确保键名与后端一致
                    option.textContent = `${job.company_name}/${job.title}/${job.job_type}`;  // 修改显示内容
                    jobSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('加载岗位时出错:', error);
                alert(error.message);
            });
        }

        function analyzeResume() {
            const resumeId = document.getElementById('resumeSelect').value;
            const jobId = document.getElementById('jobSelect').value;

            if (!resumeId) {
                alert('请选择一份简历');
                return;
            }

            if (!jobId) {
                alert('请选择一个岗位');
                return;
            }

            if (!selectedModel) {
                alert('请选择一个分析模型');
                return;
            }

            // 显示加载弹窗
            const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
            loadingModal.show();

            console.log('Selected resume ID:', resumeId);  // 打印选中的简历ID
            console.log('Selected job ID:', jobId);  // 打印选中的岗位ID

            const formData = new FormData();
            formData.append('resume_id', resumeId);
            formData.append('job_id', jobId);
            formData.append('model', selectedModel);

            fetch('/api/analyze_resume', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('分析失败: ' + response.statusText);
                }
            })
            .then(data => {
                // 不隐藏加载弹窗
                // loadingModal.hide();

                // 修改加载提示信息
                document.getElementById('loadingMessage').textContent = '分析完毕，请查看报告';

                // 添加查看报告按钮
                const modalBody = document.querySelector('#loadingModal .modal-body');
                const viewReportButton = document.createElement('button');
                viewReportButton.className = 'btn btn-primary mt-3';
                viewReportButton.textContent = '点击查看报告';
                viewReportButton.onclick = function() {
                    window.location.href = `/applicant/resume_report`;
                };
                modalBody.appendChild(viewReportButton);
            })
            .catch(error => {
                alert(error.message);
            });
        }

        // 页面加载完成后加载简历和岗位选项
        window.onload = function() {
            loadResumes();
            loadJobs();
        };
    </script>
</body>
</html>